<template>
  <div>
    <!-- 无封面的 -->
    <div class="itemone" @click="goArticle">
      <div class="itemthree">
        <!-- 单图的时候标题宽度为447 -->
        <div class="title" :class="{ wd447: artItem.cover.type == 1 }">
          {{ artItem.title }}
        </div>
        <div v-if="artItem.cover.type == 1" class="imglist">
          <van-image
            class="imgitem"
            v-for="(item, index) in artItem.cover.images"
            :key="index"
            :src="item"
          />
        </div>
        <div v-if="artItem.cover.type == 3" class="imglist">
          <van-image
            class="imgitem"
            v-for="(item, index) in artItem.cover.images"
            :key="index"
            :src="item"
          />
        </div>
      </div>

      <div class="tip">
        <span :class="{ red: artItem.is_top == 1 }">{{
          artItem.is_top == 1 ? "置顶" : "未置顶"
        }}</span>
        <span>{{ artItem.aut_name }}</span>
        <span>{{ artItem.comm_count }}</span>
        <!-- 要处理的值 | 过滤器方法 -->
        <span>{{ artItem.pubdate | datatime }}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  //接收一下从artList 获取到的数据
  props: {
    artItem: Object,
  },
  data() {
    return {};
  },
  methods: {
    goArticle() {
      this.$router.push({ path: `/article/${this.artItem.art_id}` });
    },
  },
};
</script>
<style scoped lang="less">
.itemone {
  padding: 24px 28px;
  background: #fff;
  border-bottom: 2px solid #edeff3;
  .title {
    font-size: 32px;
    line-height: 32px;
    color: #3a3a3a;
    margin-bottom: 24px;
  }
  .tip {
    font-size: 24px;
    line-height: 24px;
    color: #b4b4b4;
    .red {
      color: red;
    }
    span {
      margin-right: 26px;
    }
  }
  .imglist {
    margin-bottom: 30px;
    .imgitem {
      width: 33.3%;
      height: 146px;
      padding: 0px 2px;
      box-sizing: border-box;
      // margin-right: 4px;
    }
  }
  .itemthree {
    overflow: hidden;
  }
  .wd447 {
    width: 446px;
    float: left;
  }
  .imgone {
    width: 232px;
    height: 146px;
    float: right;
  }
}
</style>
